<template>
  <div class="card">
    <div class="card-header card-header-inverse ${colorClass}">
      <div class="font-weight-bold">
        <span>SALE</span>
        <span class="float-xs-right">$1.890,65</span>
      </div>
      <div>
                        <span>
                            <small>Today 6:43 AM</small>
                        </span>
                        <span class="float-xs-right">
                            <small>+432,50 (15,78%)</small>
                        </span>
      </div>
      <div class="chart-wrapper">
        <canvas class="chart chart-line"
                height="40"
                chart="type: line; should-update: false; data.bind: chartDataLine; native-options.bind:optionsLine"></canvas>
      </div>
      <div class="chart-wrapper">
        <canvas class="chart chart-bar"
                height="40"
                chart="type: bar; should-update: false; data.bind: chartDataBar; native-options.bind:optionsBar"></canvas>
      </div>
    </div>
  </div>

</template>
